<template>
	<view class="container">
		<view class="week">
			<view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view class="week_content">
						<view v-for="(item,index) in weekArr" class="item" :class="{ 'active': item.isActive }"
							@click="weekHandleClick(index)">
							<view class="week_text" :class="{ 'active': item.isActive }">
								{{item.week}}
							</view>
							<view class="date_text">
								{{item.date}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="choose_store">

			<u-card :head-style="headStyle" :body-style="headStyle">
				<view class="administration" slot="body">
					<u-cell-group>
						<u-cell-item @click="cellClick" icon="car" :title="title"></u-cell-item>

					</u-cell-group>
				</view>
			</u-card>
		</view>
		<view class="store_wrap">
			<view class="none" v-if="appLists.length<=0">
				暂无预约
			</view>
			<u-card :border="false" :head-border-bottom="false" :head-style="headStyle" v-for="(item,index) in appLists"
				@click="car_detail(item.id,item.car_id)">
				<view class="store" slot="body">
					<view class="image">
						<image src="/static/images/car.png" mode="widthFix"></image>
					</view>
					<view class="content">
						<view class="title">
							<text style="margin-right: 10rpx;">{{item.car_num}}</text>

						</view>
						<view class="address">
							<text style="margin-right: 10rpx;">{{item.username}}</text>
							<text>{{item.phone}}</text>
						</view>
						<view class="address">
							<text style="margin-right: 10rpx;">{{item.brand}}</text>
							<text>{{item.model}}</text>
						</view>
					</view>

					<view class="select">
						<view class="appoinment_time">
							<view class="title">
								预约时间
							</view>
							<view class="date">
								{{item.appointment_time.substring(item.appointment_time.length-5)}}
							</view>
						</view>
					</view>
				</view>
			</u-card>

		</view>
		     
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appLists: [],
				shop_id: '',
				title: '选择门店',
				currentWeek: '今天',
				currentDate: '',
				currentTime: '8:00',
				currentYear: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				weekArr: [],
				headStyle: {
					padding: 0
				}

			}
		},
		created() {

		},
		onLoad() {
			// this.checkLogin()
			console.log('onLoad')
		},
		onShow() {

			this.title = '选择门店'
			//获取系统当前时间
			var now = new Date();
			var nowTime = now.getTime();
			var year = now.getFullYear();
			var month = now.getMonth() + 1;
			var date = now.getDate();
			if (date <= 9) {
				date = `0${date}`
			}
			let currentDate = `${year}-${month}-${date}`
			console.log(currentDate)
			this.getDate()
			let {
				shop_id,
				shopName
			} = uni.getStorageSync('shoeName')
			this.$u.api.changeStore({
				date: currentDate,
				shop_id: 0
			}).then(res => {


				if (res.status == 200) {
					this.appLists = res.data
				}
			})
			if (shopName) {
				console.log(date, 1111111)
				this.title = shopName
				this.shop_id = shop_id
				this.$u.api.changeStore({
					shop_id,
					date: `${year}-${month}-${date}`
				}).then(res => {
					if (res.status == 200) {
						console.log(res)
						this.appLists = res.data
					}
				})
			}
			uni.removeStorageSync('shoeName');
		},
		methods: {
			
			cellClick(index) {
				uni.navigateTo({
					url: '/pages/select_store/select_store'
				});
			},
			handleSubmit() {
				this.$u.route({
					url: '/pages/service_reservation/service_reservation',
					params: {
						currentWeek: this.currentWeek,
						currentDate: this.currentDate,
						currentTime: this.currentTime
					}
				})
			},
			weekHandleClick(index) {
				this.weekArr.forEach((item, index) => {
					item.isActive = false
				})
				this.weekArr[index].isActive = true
				this.currentWeek = this.weekArr[index].week
				this.currentDate = this.weekArr[index].date
				this.currentYear = this.weekArr[index].year
				let date = this.currentYear + '-' + this.currentDate
				this.$u.api.changeStore({
					shop_id: this.shop_id || 0,
					date
				}).then(res => {
					if (res.status == 200) {
						console.log(res)
						this.appLists = res.data
					}
				})
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},

			getDate() {
				//获取系统当前时间
				var now = new Date();
				var nowTime = now.getTime();
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var date = now.getDate();
				if (date <= 9) {
					date = `0${date}`
				}
				this.currentDate = month + "-" + date
				var currentDay = {
					date: month + "-" + date,
					week: '今天',
					isActive: true,
					year
				}
				var oneDayTime = 24 * 60 * 60 * 1000;
				var dateArr = []
				for (var i = 0; i < 7; i++) {
					//显示周一
					var ShowTime = nowTime + (i + 1) * oneDayTime;
					//初始化日期时间
					var myDate = new Date(ShowTime);
					var year = myDate.getFullYear();
					var month = myDate.getMonth() + 1;
					var date = myDate.getDate();
					if (date <= 9) {
						date = `0${date}`
					}

					dateArr.push({
						year: year,
						date: month + "-" + date,
						week: "星期" + "日一二三四五六".charAt(myDate.getDay()),
						isActive: false,
						year
					})

				}
				dateArr[0].week = '明天'
				dateArr.unshift(currentDay)
				this.weekArr = dateArr
			},
			car_detail(id, car_id) {
				uni.navigateTo({
					url: `/pages/car_detail/car_detail?id=${id}&car_id=${car_id}`
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
	}

	.container {
		height: 100%;

	}

	.week {
		overflow: auto;
		background: #fff;
	}

	.time {

		padding: 20rpx;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		text-align: center;

	}

	.time .item {
		width: 22%;
		padding: 10rpx 16rpx;
		margin: 10rpx;
		flex-wrap: wrap;
		background: #fff;
		border-radius: 8rpx;
	}

	.time .item.active {
		background-color: #fbd7d4;
		color: #eb3626;
	}

	.week_content {
		width: 100%;
		text-align: center;
		display: flex;
	}

	.week_content .item {
		padding: 16rpx;
	}

	.week_content .item.active {
		color: #eb3626;
	}

	.week_content .item .week_text {
		padding: 6rpx 14rpx;
		margin-bottom: 6rpx;
	}

	.week_content .item .week_text.active {
		background: #eb3626;
		border-radius: 6rpx;
		color: #fff;
	}

	scroll-view {
		/* padding: 30rpx 40rpx; */
		white-space: nowrap;
	}

	.store_wrap {
		position: relative;

		.none {
			padding: 20rpx;
			font-size: 30rpx;
		}

		.store {

			display: flex;
			justify-content: space-around;
			align-items: center;

			.image {

				width: 50rpx;
				height: 50rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.content {

				width: 70%;
				color: #333333;

				.title {
					font-size: 32rpx;
					font-weight: 700;

				}

				.address {
					margin-top: 10rpx;
				}
			}

			.select {
				position: absolute;
				color: #eb3626;
				top: 0;
				right: 18rpx;
				text-align: center;

				.appoinment_time {
					border: 2rpx solid;
					border-bottom-right-radius: 14rpx;
					border-bottom-left-radius: 14rpx;

					.title {
						font-size: 24rpx;
						background-color: #eb3626;
						padding: 4rpx 14rpx;
						color: #fff;
					}
				}
			}


		}
	}

	.submit_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 18rpx;
		background: #fff;
	}

	.submit_btn .btn button {
		background: #eb3626;
	}
</style>
